<template>
  <div>
    <img src="../assets/imgs/logo.png" height="58" width="250"/>
    <el-divider />
    <el-menu
        background-color="#EEEEEE"
        default-active="/main"
        router="true"
    > <!-- router="true"使用menu-item的index属性值作为路由跳转目标 -->
      <el-menu-item index="/main">
        <el-icon><House /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <!-- sub-menu 下级菜单 -->
      <el-sub-menu index="manager" v-if="permissions['0']==='sys'">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>系统信息管理</span>
        </template>
        <el-menu-item index="userman">
          <el-icon><User /></el-icon>
          用户信息管理
        </el-menu-item>
        <el-menu-item index="logaopman">
          <el-icon><Notebook /></el-icon>
          操作日志管理
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/flightman" v-if="permissions['1']==='infor'">
        <template #title>
          <el-icon><InfoFilled /></el-icon>
          <span>航班信息管理</span>
        </template>
        <el-menu-item index="alterflight">
          <el-icon><Edit /></el-icon>
          飞机变更申请
        </el-menu-item>
        <el-menu-item index="addflight">
          <el-icon><Bell /></el-icon>
          离港信息管理
        </el-menu-item>
        <el-menu-item index="cancelflight">
          <el-icon><CircleCheck /></el-icon>
          到港信息管理
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/flightselect" v-if="permissions['0']==='query'||permissions['1']==='query'||permissions['4']==='query'">
        <template #title>
          <el-icon><Search /></el-icon>
          <span>查询信息管理</span>
        </template>
        <el-menu-item index="selectflight">
          <el-icon><Position /></el-icon>
          查询航班信息
        </el-menu-item>
        <el-menu-item index="luggage">
          <el-icon><Cellphone /></el-icon>
          查询行李信息
        </el-menu-item>
        <el-menu-item index="animal">
          <el-icon><Van /></el-icon>
          宠物托运服务
        </el-menu-item>
        <el-menu-item index="visitor">
          <el-icon><Compass /></el-icon>
          旅客指南
        </el-menu-item>
        <el-menu-item index="flightstationbaidumap">
          <el-icon><MapLocation /></el-icon>
          航站地图
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/infototal" v-if="permissions['3']==='statistics'">
        <template #title>
          <el-icon><TrendCharts /></el-icon>
          <span>信息统计管理</span>
        </template>
        <el-menu-item index="flightstatical">
          <el-icon><Histogram /></el-icon>
          航班类型统计
        </el-menu-item>
        <el-menu-item index="flightmap">
          <el-icon><Histogram /></el-icon>
          航线统计地图
        </el-menu-item>
<!--        <el-menu-item index="flightstate">
          <el-icon><Histogram /></el-icon>
          航班状态
        </el-menu-item>
        <el-menu-item index="flighttype">
          <el-icon><Menu /></el-icon>
          航班属性
        </el-menu-item>-->
      </el-sub-menu>
      <el-sub-menu index="/flightalter" v-if="permissions['0']==='audit'||permissions['2']==='audit'">
        <template #title>
          <el-icon><CircleCheck /></el-icon>
          <span>航班审核管理</span>
        </template>
        <el-menu-item index="flightrequest">
          <el-icon><Checked /></el-icon>
          航班变更审核
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>
<script setup>
import {
  Notebook,
  Setting,Compass,Histogram,Checked,
  Bell, Menu , Search ,CircleCheck,Edit,User,House,SuccessFilled,TrendCharts,Position,Cellphone,Van

} from '@element-plus/icons'
import {reactive} from "vue";
import request from "@/utils/request";
import globaljs from '@/assets/js/global'
import {InfoFilled, MapLocation, Message} from "@element-plus/icons-vue";

// 从SessionStorage取出数据
let userstr = sessionStorage.getItem('username')
//alert(JSON.parse(userstr).permission)
let userPermissions=JSON.parse(userstr).permission
const permissions = reactive({
  0 : userPermissions[0]||'',
  1 : userPermissions[1]||'',
  2 : userPermissions[2]||'',
  3 : userPermissions[3]||'',
  4 : userPermissions[4]||''
})
</script>


<style scoped>
.el-menu-item.is-active {
  background-color: #3370ff !important;
  color: #fff;
  span {
    color: #fff !important;
  }
}
.el-menu-item:hover {
  background-color: #2c3e50;
  color: white !important;
}
</style>